<template>
  <template v-if="localStore.innerWidth > 768">
    <div class="footer f-c-dc" ref="footerRef">
      <div class="footer-wrap f-r-dc">
        <div class="footer-wrap-left">
          <img src="@/assets/img/banner/banner-logo.png" class="footer-logo" alt="" />
          <ul class="footer-infomation-ul" v-if="infomation_list.length">
            <li
              v-for="(item, index) in infomation_list[0].value"
              :key="index"
              class="footer-infomation-li"
            >
              <p class="title">{{ item.key }}</p>
              <p class="desc" v-if="item.key == '地址'">{{ address_ }}</p>
              <p class="desc" v-else>{{ item.value }}</p>
            </li>
          </ul>
        </div>
        <div class="footer-wrap-right">
          <el-row>
            <el-col
              :xs="24"
              :sm="12"
              :md="6"
              :lg="6"
              class="footer-wrap-right-item"
              v-for="(item, index) in data_list"
              :key="index"
            >
              <template
                v-if="
                  item.name == 'enter_serve' ||
                  item.name == 'save_money' ||
                  item.name == 'business_college'
                "
              >
                <div class="right-title">{{ item.title }}</div>
                <p
                  class="right-nav cursor"
                  v-for="(citem, cindex) in item.value"
                  :key="cindex"
                  @click="toPage(citem.value, item.name)"
                >
                  {{ citem.key }}
                </p>
              </template>
              <template v-if="item.name == 'or_code'">
                <div class="wechat-info">
                  <div class="right-title">{{ item.title }}</div>
                  <div class="qrcode-wrap f-r-sbc">
                    <div class="wrap-item f-c-cc" v-for="(citem, cindex) in item.value">
                      <img
                        @click="viewImg($imgUrl(citem.value))"
                        :src="$imgUrl(citem.value)"
                        class="qrcode-img cursor"
                        alt=""
                      />
                      <p class="wrap-item-title">{{ citem.key }}</p>
                    </div>
                  </div>
                </div>
              </template>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="record-tips">
        <p>
          举报联系方式 13479794289 或
          <a href="mailto:support@jinxingai.cn" target="_blank" style="color: #ffffff66"
            >support@jinxingai.cn</a
          >
          ｜
          <a href="https://beian.miit.gov.cn/" target="_blank" style="color: #ffffff66"
            >{{ foot_info.record_number }}</a
          >
          |
          <a href="https://beian.miit.gov.cn/" target="_blank" style="color: #ffffff66"
            >备案号查询</a
          >
        </p>
        <p>{{ foot_info.address }}</p>
        <p>
          <a href="https://beian.miit.gov.cn/" target="_blank" style="color: #ffffff66"
            >{{ foot_info.company }}</a
          >
        </p>
      </div>
    </div>
  </template>
  <!-- 移动 -->
  <template v-else>
    <div class="footer f-c-dc" :class="is_home ? 'home' : ''" ref="footerRef">
      <div class="footer-logo-wrap f-r-cc">
        <img src="@/assets/img/banner/banner-logo.png" class="footer-logo-m" alt="" />
      </div>

      <div class="footer-contact-wrap f-r-sac">
        <div class="footer-contact-item f-c-cc" v-for="(citem, cindex) in or_code_info.value">
          <img
            @click="viewImg($imgUrl(citem.value))"
            :src="$imgUrl(citem.value)"
            class="qrcode-img-m cursor"
            alt=""
          />
          <p class="wrap-item-title-m">{{ citem.key }}</p>
        </div>
      </div>

      <div class="footer-infomation-wrap">
        <p
          class="infomation-item f-r"
          v-for="(item, index) in infomation_list[0].value"
          :key="index"
        >
          <span class="infomation-item-label">{{ item.key }}</span>
          <span class="infomation-item-text">{{ item.value }}</span>
        </p>
      </div>

      <div class="footer-navs-wrap">
        <div class="navs-item" v-for="(item, index) in data_list" :key="index">
          <template
            v-if="
              item.name == 'enter_serve' ||
              item.name == 'save_money' ||
              item.name == 'business_college'
            "
          >
            <p class="navs-item-title">{{ item.title }}</p>
            <div class="item-nav-wrap f-r">
              <span
                class="item-nav cursoor"
                v-for="(citem, cindex) in item.value"
                :key="cindex"
                @click="toPage(citem.value, item.name)"
                >{{ citem.key }}</span
              >
            </div>
          </template>
        </div>
      </div>

      <div class="record-tips-m">
        <p>
          举报联系方式 13479794289 或
          <a href="mailto:support@jinxingai.cn" target="_blank" style="color: #ffffff66"
            >support@jinxingai.cn</a
          >
          ｜
          <a href="https://beian.miit.gov.cn/" target="_blank" style="color: #ffffff66"
            >{{ foot_info.record_number }}</a
          >
          |
          <a href="https://beian.miit.gov.cn/" target="_blank" style="color: #ffffff66"
            >备案号查询</a
          >
        </p>
        <p>{{ foot_info.address }}</p>
        <p>
          <a href="https://beian.miit.gov.cn/" target="_blank" style="color: #ffffff66"
            >{{ foot_info.company }}</a
          >
        </p>
      </div>
    </div>
  </template>
</template>

<script setup>
import { getTailInfo } from '@/api/index.js'
import { useLocal } from '@/stores/local'
const localStore = useLocal()
const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()

const props = defineProps({
  module: {
    type: [Number, String],
    default: ''
  }
})

const is_home = computed(() => {
  return route.name === 'Home'
})

const data_list = ref([])

const or_code_info = ref({})

const or_code_info_ = ref(100)

const infomation_list = ref([
  {
    title: '官方邮箱',
    desc: '12435@qq.com'
  },
  {
    title: '客服',
    desc: '400-8888-999'
  },
  {
    title: '地址',
    desc: '深圳市南山区粤海街道高新南九道45号三航科技大厦8005'
  }
])

const foot_info = location.host == 'mdd3.cn' ? {
  record_number: '粤ICP备2023155369号',
  address: '地 址：广东省深圳市南山区高新南九道45号西北工业大学三航科技大厦8005',
  company: 'Copyright @2024 高新米多多（深圳）网络科技有限公司 All rights reserved.'
} : {
  record_number: '赣ICP备2024044295号',
  address: '地 址：江西省赣州市定南县历市镇东江源大道西88号供销冷链物流园综合楼A2层224号',
  company: 'Copyright @2024 锦星人工智能科技（江西）有限公司 All rights reserved.'
}

const address_ = location.host == 'mdd3.cn' ? '广东省深圳市南山区高新南九道45号西北工业大学三航科技大厦8005' : '江西省赣州市定南县历市镇东江源大道西88号供销冷链物流园综合楼A2层224号'

function viewImg(url) {
  if (localStore.innerWidth < 768) return
  proxy.$showImage(url)
}

const getTailInfoData = async () => {
  let res = await getTailInfo()
  if (localStore.innerWidth > 768) {
    data_list.value = res.data.filter((item) => item.name != 'contact_us')
  } else {
    data_list.value = res.data.filter((item) => item.name != 'contact_us' && item.name != 'or_code')
  }
  infomation_list.value = res.data.filter((item) => item.name == 'contact_us')
  console.log('--------->>>',infomation_list.value);
  or_code_info.value = res.data.find((item) => item.name == 'or_code')
}

function toPage(value, cate_name) {
  if (!value) return
  if (cate_name != 'enter_serve') {
    // 学院
    router.push({
      path: '/universe/details',
      query: {
        id: value
      }
    })
  } else {
    router.push({
      path: value
    })
  }
}

const footerRef = ref()

function scrollToHandle() {
  nextTick(() => {
    footerRef.value && footerRef.value.scrollTo(0, 0)
  })
}

defineExpose({
  scrollToHandle
})

onMounted(() => {
  getTailInfoData()
})
</script>

<style scoped lang="less">
@import '@/assets/css/footer.less';
@media screen and (max-width: 768px) {
  @import '@/assets/css/mobile/footer.less';
}
</style>
